<template>
  <header>
    <div class="header-top min-width">
      <div class="container fn-clear">
        <strong class="fn-left">
          咨询热线：400-000-0000
          <span class="s-time">服务时间：9:00 - 18:00</span>
        </strong>
        <ul class="header_contact">
          <li class="c_1">
            <a class="ico_head_weixin" id="wx"></a>
          </li>
          <li class="c_2">
            <a href="#" target="_blank" title="官方QQ" alt="官方QQ">
              <b class="ico_head_QQ"></b>
            </a>
          </li>
          <li class="c_4">
            <a href="#" target="_blank" title="新浪微博" alt="新浪微博">
              <b class="ico_head_sina"></b>
            </a>
          </li>
        </ul>

        <!-- 用户未登录 -->
        <ul v-if="!userInfo" class="fn-right header-top-ul">
          <!-- <li><a href="" :class="'c-orange'">测试</a></li> -->
          <li>
            <NuxtLink to="/" :class="{ 'c-orange': $route.fullPath === '/' }"
              >返回首页</NuxtLink
            >
          </li>
          <li>
            <div class="">
              <NuxtLink
                to="/register"
                :class="{ 'c-orange': $route.fullPath === '/register' }"
              >
                免费注册
              </NuxtLink>
            </div>
          </li>
          <li>
            <div class="">
              <NuxtLink
                to="/login"
                :class="{ 'c-orange': $route.fullPath === '/login' }"
              >
                登录
              </NuxtLink>
            </div>
          </li>
        </ul>

        <!-- 用户已登录 -->
        <ul v-if="userInfo" class="fn-right header-top-ul">
          <li><NuxtLink to="/" class="app">返回首页</NuxtLink></li>
          <li>
            <div class="">
              <NuxtLink to="/user" class="user" title="我的账户">
                <img :src="userInfo.headImg" alt="" class="avatar">
                <i class="el-icon-user-solid">{{ userInfo.name }}</i>
              </NuxtLink>
            </div>
          </li>
          <li>
            <div class="">
              <a
                href="javascript:void(0)"
                class="js-login"
                @click="logout()"
                title="退出"
              >
                退出
              </a>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="header min-width">
      <div class="container">
        <div class="fn-left logo">
          <NuxtLink to="/">
            <img src="~/assets/images/logo.png" title="" />
          </NuxtLink>
        </div>
        <ul class="top-nav fn-clear">
          <li :class="{ on: $route.fullPath === '/' }">
            <NuxtLink to="/">首页</NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/list' }">
            <NuxtLink to="/lend"> 我要投资 </NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/help' }">
            <NuxtLink to="/help">安全保障</NuxtLink>
          </li>
          <li :class="{ on: $route.fullPath === '/about' }">
            <NuxtLink to="/about">关于我们</NuxtLink>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>
<script>
import '~/assets/font/iconfont.css'
import cookie from 'js-cookie'

export default {
  data() {
    return {
      userInfo: null
    }
  },

  mounted() {
    this.showInfo()
    // 微信登录url token获取
    const token = this.$route.query.token
    if (token) {
      // 登录成功后将token写入localStorage
      localStorage.setItem('FINANCE-TOKEN',token)
      // 跳转页面：擦除url中的token
      // 注意：window对象在created方法中无法被访问，因此要写在mounted中
      window.location.href = '/'
    }
  },

  methods: {
    //显示用户信息
    showInfo() {
      //先查询用户信息缓存如果存在回显
      const userInfo = localStorage.getItem("userInfo");
      if (userInfo){
        this.userInfo = JSON.parse(userInfo)
        return
      }
      // 如果不存在查询本地缓存的token，如果存在根据token获取用户信息回显
      const token = localStorage.getItem("FINANCE-TOKEN");
      if (token){
        //访问后端查询用户信息接口: 协议 服务器ip:应用端口号 资源路径
        //访问后端查询用户信息接口: 协议 服务器ip:应用端口号 资源路径
        this.$axios({
          url: "/core/api/userInfo/info",
          method: "GET",
          headers: { token }, //axios传参时  data  params  headers的值必须传json对象
        }).then((response) => {
          console.log("token缓存查询回显");
          //r代表响应报文
          this.userInfo = response.data.data
          //缓存查询到的用户信息: 对象不能直接存储，需要转为json字符串
          localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
        });
      }
    },

    //退出
    logout() {
      //清空缓存 刷新页面
      localStorage.removeItem("FINANCE-TOKEN");
      localStorage.removeItem("userInfo");
      window.location = "/";
    },
  },
}
</script>

<style scoped>
.avatar {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
</style>